﻿{extend name="layout/main-block" /}
{block name="sub-wrapper"}
<!--内容容器-->
<section id="sub-wrapper" class="full-screen page-carManage">
    <!--数据展示容器-->
    <div id="sub-content">
        <div id="sub-header">
            <div class="sub-title">
                <h3><i class="fa fa-car"></i>车辆--车辆管理</h3>
            </div>
            <div class="sub-tools">
                <div id="searchTool">
                    <form class="form-inline">
                        <input size="30" class="form-control" id="phname" placeholder="请输入车牌号进行检索" />
                        <a class="btn btn-primary" id="searchname"><i class="fa fa-search"></i>搜索</a>
                        <a class="btn btn-info" id="delSearch"><i class="fa fa-search"></i>清空搜索</a>
                    </form>
                </div>
            </div>
        </div>
        <div class="table-responsive data-table">
            <table class="table table-striped table-bordered table-hover">
                <thead>
                    <tr>
                        <!-- <th class="text-center" width="34px">
                            <input type="checkbox" />
                        </th> -->
                        <th>ID</th>
                        <th>车牌</th>
                        <!-- <th>品牌</th> -->
                        <th>车型</th>
                        <th>关联用户</th>
                        <th>关联设备</th>
                        <th>关联时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {volist name="carmanage" id="v" empty="$empty" }
                    <tr>
                        <!-- <td class="text-center">
                            <input type="checkbox" />
                        </td> -->
                        <td>{$v.id}</td>
                        <td>{$v.plate_number}</td>
                        <!-- <td>{$v.car_brand}</td> -->
                        <td>{$v.car_model}</td>
                        <td>{$v.username}</td>
                        <td>{$v.dname}</td>
                        <td>{$v.created_at} <a class="btn carRecord" data-name="{$v.id}" data-imei="{$v.imei}">实时位置</a>
                            <a class="btn carHistory" data-name="{$v.id}" data-imei="{$v.imei}">历史轨迹</a></td>
                        <td>
                            <ul class="record-tool">
                                <li><a class="btn btn-info btn-sm viewRecord" data-name="{$v.id}">详情</a></li>
                                <!-- <li><a class="btn btn-warning btn-sm editRecord" data-name="{$v.id}">修改</a></li> -->
                                <li><a class="btn btn-danger btn-sm delRecord" data-name="{$v.id}">删除</a></li>
                            </ul>
                        </td>
                    </tr>
                    {/volist}
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="4" class="">
                            {$page}
                            <!--<ul class="pagination">
                                <li>
                                    <a href="#" aria-label="Previous">
                                        <span aria-hidden="true">&laquo;</span>
                                    </a>
                                </li>
                                <li class="active"><a href="#">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li><a href="#">4</a></li>
                                <li><a href="#">5</a></li>
                                <li><a href="#">...</a></li>
                                <li><a href="#">999</a></li>
                                <li>
                                    <a href="#" aria-label="Next">
                                        <span aria-hidden="true">&raquo;</span>
                                    </a>
                                </li>
                            </ul>-->
                        </td>
                        <td colspan="2" class="text-center">
                            <div class="table-summary">
                                <div class="input-group">
                                    <div class="input-group-addon">到第</div>
                                    <input type="text" class="form-control" id="goto" placeholder=""
                                        style="width:40px;">
                                    <div class="input-group-addon">页</div>
                                    <span class="input-group-btn">
                                        <a class="btn btn-primary" data-currentPage="{$currentPage}"
                                            data-lastPage="{$lastPage}" id="gotoPage"><i
                                                class="fa fa-arrow-right"></i>确定</a>
                                    </span>
                                </div>
                            </div>
                        </td>
                        <td colspan="1" class="text-center">
                            共<span id="total-record" class="text-success fa-2x"> {$count} </span>条记录
                        </td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
</section>
{/block}

{block name="viewRecord"}
<!--编辑工具-->
<div id="viewRecord" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">ID:<span id="recordId"></span></h4>
            </div>
            <div class="modal-body">
                <div class="col-xs-12">
                    <form class="form-horizontal" name="editForm">
                        <div class="form-group">
                            <label for="plate_number">车牌</label>
                            <input type="text" class="form-control" id="plate_number" name="plate_number">
                        </div>
                        <!-- <div class="form-group">
                            <label for="car_brand">品牌</label>
                            <input type="text" class="form-control" id="car_brand" name="car_brand">
                        </div> -->
                        <div class="form-group">
                            <label for="car_model">车型</label>
                            <input type="text" class="form-control" id="car_model" name="car_model">
                        </div>
                        <div class="form-group">
                            <label for="user_id">关联用户</label>
                            <select name="user_id" id="user_id" class="form-control">
                                {volist name="account" id="a" empty="$empty" }
                                <option value="{$a.id}">{$a.username}</option>
                                {/volist}
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="device_id">关联设备</label>
                            <select name="device_id" id="device_id" class="form-control">
                                {volist name="device" id="d" empty="$empty" }
                                <option value="{$d.id}">{$d.sn}</option>
                                {/volist}
                            </select>
                        </div>
                    </form>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="modal-footer">
                <a class="btn btn-warning" data-dismiss="modal"><i class="fa fa-times"></i>关闭</a>
            </div>
        </div>
    </div>
</div>
<!--编辑工具-->
{/block}

{block name="carRecord"}
<!--地图编辑-->
<div id="carRecord" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title"><span>实时位置</span></h4>
            </div>
            <div class="modal-body">
                <div class="col-xs-12">

                    <div class="mapcontainer" id="mapcontainer">

                    </div>
                   <!-- <h4 class="modal-title form-group"><span>实时位置</span></h4>-->
                    <form class="form-horizontal">
                        <!-- <div class="row">
                            <div class="form-group col-xs-6">
                                <label for="carnumber">车牌号</label>
                                <input type="text" class="form-control" name="carnumber" id="carnumber"
                                    placeholder="鲁B-19213">
                            </div>
                            <div class="form-group col-xs-6 margin-10">
                                <label for="carmaster">车主</label>
                                <input type="text" class="form-control" name="carmaster" id="carmaster"
                                    placeholder="王二麻子">
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col-xs-6">
                                <label for="devicename">设备名</label>
                                <input type="text" class="form-control" name="devicename" id="devicename"
                                    placeholder="有线0123456789">
                            </div>
                            <div class="form-group col-xs-6">
                                <label for="devicenumber-carRecord">设备号</label>
                                <input type="text" class="form-control" id="devicenumber-carRecord" name="devicenumber"
                                    placeholder="123456789">
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col-xs-6">
                                <label for="warningtype">预警类型</label>
                                <input type="text" class="form-control" id="warningtype" name="warningtype"
                                    placeholder="通电警报">
                            </div>
                            <div class="form-group col-xs-6">
                                <label for="warningtime">预警时间</label>
                                <input type="text" class="form-control" id="warningtime" name="warningtime"
                                    placeholder="2019-02-18 15:44:00">
                            </div>
                        </div> -->

                       <div class="form-group wid-97">
                            <!-- <label for="warningpoint">实时地点</label> -->
                            <!-- <i class="fa fa-map-marker"></i> -->
                            <input type="text" class="form-control wid-100" id="warningpoint" name="warningpoint">
                        </div>
                    </form>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="modal-footer">
                <a class="btn btn-warning" data-dismiss="modal"><i class="fa fa-times"></i>关闭</a>
            </div>
        </div>
    </div>
</div>

<div id="carHistory" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title"><span>轨迹详情</span></h4>
            </div>
            <div class="modal-body">

                <div class="col-xs-12">
                    <form class="form-inline">
                        <div class="form-group">
                            <i class="fa fa-tv"></i>
                            <label for="devicenumber-carHistory">设备号</label>
                            <input type="text" class="form-control" id="devicenumber-carHistory"
                                placeholder="123456789">
                        </div>
                        <div class="bt-15"></div>
                        <div class="form-group">
                            <i class="fa fa-calendar"></i>
                            <label class="chooseHistoryDate">选择日期:</label>
                            <input size="13" class="form-control" id="carHistorystartDate" />
                            <label class="">-</label>
                            <input size="13" class="form-control" id="carHistoryendDate" />
                            <a class="btn btn-primary" id="carhistorysearch"><i class="fa fa-search"></i>搜索</a>
                        </div>


                    </form>


                    <div class="mapcontainer" id="mapHistorycontainer">

                    </div>
                    <!-- <h4 class="modal-title form-group"><span>轨迹信息</span></h4>
                    <form class="form-horizontal">


                        <div class="form-group wid-97">
                            <label for="warningpoint">预警点</label>
                            <i class="fa fa-map-marker"></i>
                            <input type="text" class="form-control wid-100" name="warningpoint" id="warningpoint-carHistory" placeholder="赵家屯">
                        </div>
                    </form> -->
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="modal-footer">
                <a class="btn btn-warning" data-dismiss="modal"><i class="fa fa-times"></i>关闭</a>
            </div>
        </div>
    </div>
</div>
<!--地图编辑-->
{/block}

{block name="javascript"}
<!--高德地图-->
 <!--<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.12&key=4e4d478f11834767e508d0a85a20246b"></script>-->
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.13&key=9cb8a32e9e3080ed4557177e25fd0713"></script>
{/block}